<template>
	<div class="food">
		<el-button class="add" type="primary" @click="add" icon="el-icon-plus">增加菜品</el-button>
		<template>
			<el-table :data="foodlist" stripe style="margin-bottom: 100px;">
				<el-table-column prop="foodid" label="菜品id" header-align="center"></el-table-column>
				<el-table-column prop="foodname" label="菜品名称" header-align="center"></el-table-column>
		        <el-table-column prop="price" label="价格" header-align="center"></el-table-column>
				<el-table-column prop="fenlei" label="分类" header-align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.fenlei=='0'">热菜</span>
						<span v-if="scope.row.fenlei=='1'">凉菜</span>
						<span v-if="scope.row.fenlei=='2'">酒水</span>
					</template>
				</el-table-column>
				<el-table-column prop="search" label="关键字" header-align="center"></el-table-column>
				<el-table-column  label="操作" header-align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="resert(scope.row.foodid)">修改</el-button>
						<el-button size="mini" type="danger" @click="deletes(scope.row.foodid)">删除</el-button>
					</template>
				</el-table-column>
		  </el-table>
		</template>
		<el-dialog title="菜品上传" :visible.sync="centerDialogVisible" width="30%" center>
		<span>
			<el-input type="text" v-model="name" placeholder="请输入菜品名称"></el-input>
			<el-input type="number" style="margin-top: 20px;" v-model="price" placeholder="请输入菜品价格"></el-input>
			<el-radio-group style="margin-top: 20px;" v-model="fenlei">
				<el-radio :label="0">热菜</el-radio>
				<el-radio :label="1">凉菜</el-radio>
				<el-radio :label="2">酒水</el-radio>
			</el-radio-group>
			<el-input style="margin-top: 20px;" v-model="search" placeholder="请输入菜品首字母"></el-input>
		</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="canel">取 消</el-button>
		    <el-button type="primary" @click="sure">确 定</el-button>
		  </span>
		</el-dialog>
		<el-dialog v-for="item of foodidlist" title="菜品修改" :visible.sync="centerDialogVisibles" width="30%" center>
			<span>
				<el-input type="text" v-model="item.foodname" placeholder="菜品名称"></el-input>
				<el-input type="number" style="margin-top: 20px;" v-model="item.price" placeholder="请输入菜品价格"></el-input>
				<el-radio-group style="margin-top: 20px;" v-model="item.fenlei">
					<el-radio :label="0">热菜</el-radio>
					<el-radio :label="1">凉菜</el-radio>
					<el-radio :label="2">酒水</el-radio>
				</el-radio-group>
				<el-input style="margin-top: 20px;" v-model="item.search" placeholder="请输入菜品首字母"></el-input>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="canel2">取 消</el-button>
				<el-button type="primary" @click="sure2(item.foodid,item.foodname,item.price,item.fenlei,item.search)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
	
<script>
	export default{
		data(){
			return{
				foodlist:[],
				foodidlist:[],
				centerDialogVisible: false,
				centerDialogVisibles:false,
				name:"",
				price:"",
				fenlei:"",
				search:"",
				resertname:"",
				resertprice:"",
				resertfenlei:"",
				resertsearch:"",
			}
		},
		methods:{
			add(){
				this.centerDialogVisible=true
			},
			canel(){
				this.centerDialogVisible=false
			},
			sure(){
				this.centerDialogVisible=false
				var event = false
				//判断菜品名称是否重复添加
				for(var item of this.foodlist){
					if(item.foodname == this.name){
						this.$message.error('该菜品已存在，请勿重新添加！')
						event = false
						break //跳出循环
					}
					else{
						event = true
					}
				}
				var name = this.name
				var price = this.price
				var fenlei = this.fenlei
				var search = this.search
				if(event){
					if(name&&price&&fenlei !==undefined&&search){
					this.$axios.get(`${this.$httpurl}/uploadname?name=${name}&price=${price}&fenlei=${fenlei}&search=${search}`).then((response)=>{
						if(response.data == "success"){
							this.$axios.get(`${this.$httpurl}/getfoodlist`).then((response)=>{
								this.foodlist = response.data
							})
							this.$message({
								message: '菜品上传成功！',
								type: 'success'
							})
							this.name = ""
							this.price = ""
							this.fenlei = ""
							this.search = ""
						}
						else{
							this.$message.error('菜品上传失败！')
						}
							
					})
				}
					else{
						this.$message.error('请将菜品信息填写完整！')
					}
				}
					
			},
			resert(foodid){
				this.centerDialogVisibles=true
				this.$axios.get(`${this.$httpurl}/getfoodid?foodid=${foodid}`).then((response)=>{
					this.foodidlist = response.data
				})
				
			},
			canel2(){
				this.centerDialogVisibles=false
			},
			sure2(foodid,foodname,price,fenlei,search){
				this.centerDialogVisibles=false
				if(foodid&&foodname&&price&&fenlei !==undefined&&search){
					this.$axios.get(`${this.$httpurl}/update?foodid=${foodid}&foodname=${foodname}&price=${price}&fenlei=${fenlei}&search=${search}`).then((response)=>{
						if(response.data == "success"){
							this.$axios.get(`${this.$httpurl}/getfoodlist`).then((response)=>{
								this.foodlist = response.data
							})
							this.$message({
								message: '菜品更新成功！',
								type: 'success'
							})
						}
						else{
							this.$message.error('菜品更新失败！')
						}
					})
				}
				else{
					this.$message.error('菜品更新失败！！请将菜品信息填写完整！')
				}
			},
			deletes(foodid){
				this.$confirm('确定删除此菜品吗?  此项操作不可逆！', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
							this.$axios(`${this.$httpurl}/delete?foodid=${foodid}`).then((response)=>{
								if(response.data == "success"){
									this.$axios.get(`${this.$httpurl}/getfoodlist`).then((response)=>{
										this.foodlist = response.data
									})
								}
							})
					  this.$message({
						type: 'success',
						message: '该菜品删除成功!'
					  });
					}).catch(() => {
					  this.$message({
						type: 'info',
						message: '该操作已取消！'
					  });          
					});
				}
		},
		mounted() {
			this.$axios.get(`${this.$httpurl}/getfoodlist`).then((response)=>{
				this.foodlist = response.data
			})
		}
		
	}
</script>
	
<style>
	.add{
		position: fixed;
		top: 55px;
		right: 5%;
		z-index: 10;
	}
	.food .el-table td, .el-table th {
			  text-align: center;
	}
</style>
